<template>
  <div class="container">
    <div id="scroll" class="scroll-container" @scroll="onScroll($event)">
      <flex :style="{width : total*100+'%',left:'-'+options.isLoop?100/total:0+'%'}">
        <flex-item :col="100/total+'%'" v-if="options.isLoop">
          <img :src="options.data[len-1].img_src" onerror="this.src='/static/images/1.jpg'"/>
        </flex-item>
        <flex-item v-for="(item,index) in options.data" :col="100/total+'%'" onerror="this.src='/static/images/0.jpg'">
          <img :src="item.img_src"/>
        </flex-item>
        <flex-item :col="100/total+'%'" v-if="options.isLoop">
          <img :src="options.data[0].img_src" onerror="this.src='/static/images/2.jpg'"/>
        </flex-item>
      </flex>
    </div>
    <div class="paginators">
      <div class="indicator" v-for="(item,index) in options.data" :class="{'active-indicator':curr_index==index}"></div>
    </div>
  </div>
</template>

<script>
  import flex from '@/components/layout/flex';
  import flexItem from '@/components/layout/flexItem';
    export default {
        name: "swiper",
        props:{
          options:{
            type:Object,
            default:function () {
              return {
                isLoop:true,//是否循环
                autoplay:false,//是否自动播放
                duration:5000,//自动播放间隔
                data:[
                  {
                    img_src:'/static/images/0.jpg'
                  },
                  {
                    img_src:'/static/images/1.jpg'
                  },
                  {
                    img_src:'/static/images/2.jpg'
                  }
                ]
              }
            }
          }
        },
        data(){
          return {
            len:this.options.data.length,
            curr_index:0
          }
        },
      components:{
          flex,
          flexItem
      },
      computed:{
          total:{
            get:function () {
              return this.len+2;
            },
            set:function (newVal){

            }
          }
      },
      methods:{
          onScroll:function (e) {
            //console.log(e.target.scrollLeft);
            var scroll_x=e.target.scrollLeft,scroll_w=e.target.scrollWidth;
            var start=scroll_w/this.total,end=scroll_w*this.len/this.total;
            if(!this.options.isLoop){
              this.curr_index=Math.floor(scroll_x/start);
              return;
            }
            this.curr_index=Math.floor(scroll_x/start)-1;
            if(scroll_x==0){
              e.target.scrollTo({
                left:end,
                behavior:'auto'
              });
              this.curr_index=this.len-1;
              return;
            }
            if(scroll_x==scroll_w-scroll_w/this.total){
              e.target.scrollTo({
                left:start,
                behavior:'auto'
              });
              this.curr_index=0;
              return;
            }

          }
      },
      mounted() {
          var scroll=document.getElementById('scroll'),this_obj=this;
          console.log(scroll.offsetWidth);
          if(this_obj.options.autoplay){
            setInterval(function () {
              this_obj.curr_index=this_obj.curr_index%this_obj.len;
              console.log(this_obj.curr_index);
              var option={
                left:scroll.offsetWidth*this_obj.curr_index,
                behavior:'smooth'
              };
              if(this_obj.options.isLoop){
                option.left=scroll.offsetWidth*(this_obj.curr_index+1);

              }
              scroll.scrollTo(option);
              this_obj.curr_index++;
            },this.options.duration);

          }
          if(!this.options.isLoop){
            this.total=this.len;
            return
          }
          scroll.scrollTo({
            left:scroll.offsetWidth
          });
      },
      created() {

      }
    }
</script>

<style lang="less" scoped>
  //@import '../../common/css/common.less';
  .container{
    height: 100%;
    width: 100%;
    position: relative;
  }
  .scroll-container{
    overflow: scroll;
    height: 100%;
    width: 100%;
    scroll-snap-type:x mandatory;
  }
  .scroll-container::-webkit-scrollbar{
    display: none;
  }
  .flex-item{
    scroll-snap-align: start;
  }

  img{
    height: 100%;
    width: 100%;
  }
  .paginators{
    width: 80%;
    margin: 10px 10%;
    height: 10px;
    position: absolute;
    bottom: 0px;
    .indicator{
      width: 10px;
      height: 10px;
      display: inline-block;
      border-radius: 5px;
      margin-right: 10px;
      border: 2px solid black;
    };
    .active-indicator{
      background: #0086b3;
    }
  }

</style>
